<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue动画</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			.content{
				width: 200px;
				height: 50px;
				background-color: bisque;
				line-height: 50px;
				text-align: center;
			}
			@keyframes error {
				20%{
					transform: translateX(-30px);
				}
				40%{
					transform: translateX(30px);
				}
				60%{
					transform: translateX(-30px);
				}
				80%{
					transform: translateX(30px);
				}
				100%{
					transform: translateX(0px);
				}
			}
			/* 动画 */
			.animate{
				animation: error 1s;
			}
			/* 过度 */
			.transition{
				transition: all 1s;
			}
			/* 进入的动画 */
			.v-enter-from{
				opacity: 0;
			}
			.v-enter-active{
				transition: all 3s;
			}
			.v-enter-to{
				opacity: 1;
			}
			/* 离开的动画 */
			.v-leave-from{
				opacity: 1;
			}
			.v-leave-active{
				transition: all 3s;
			}
			.v-leave-to{
				opacity: 0;
			}
			
			/* 进入的动画 */
			.four-enter-from{
				opacity: 0;
				background-color: red;
			}
			.four-enter-active{
				transition: all 1s;
			}
			.four-enter-to{
				opacity: 1;
				background-color: orange;
			}
			/* 离开的动画 */
			.four-leave-from{
				opacity: 1;
				background-color: orange;
			}
			.four-leave-active{
				transition: all 1s;
			}
			.four-leave-to{
				opacity: 0;
				background-color: green;
			}
			
			.five{
				transition: all 6s;
			}
			
		</style>
		 <link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />
	</head>
	<body>
		<div id="app">
			<!-- <div class="content" ref="first" :class="errorClass" @animationend="errorClass.animate = false">第一个动画</div>
			<div class="content" ref="second" :class="errorClass" @animationend="errorClass.animate = false" :style="style">第二个动画</div> -->
			<!-- 动画标签 -->
			<!-- <transition>
				<div v-if="show" class="content">第三个动画</div>
			</transition>
			<transition name="four">
				<div v-if="show" class="content">第四个动画</div>
			</transition>
			<transition enter-active-class="five" leave-active-class="five">
				<div v-if="show" class="content">第五个动画</div>
			</transition> -->
			<!-- 动画网站：animate.style -->
			<!-- <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOutDown">
				<div v-if="show" class="content">第六个动画</div>
			</transition> -->
			<transition-group enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOutDown">
				<div v-if="show" class="content">动画切换1</div>
				<div v-if="!show" class="content">动画切换2</div>
			</transition-group>
			<div class="but_box">
				<!-- 传递事件对象参数 -->
				<button @click="startMove($event)">动画切换1</button>
			</div>
		</div>
	</body>
</html>
<script>
	const app = Vue.createApp({
		data(){
			return{
				errorClass:{'animate':false,transition:true},
				show:false,
				style:{
					backgroundColor:'bisque'
				}
			}
		},
		methods:{
			startMove(e){
				// 获取ref指向的dom对象
				console.log(this.$refs);
				console.log(e.target);
				this.errorClass.animate = true
				this.show = !this.show
				this.style.backgroundColor == 'bisque'?this.style.backgroundColor = 'orange':this.style.backgroundColor = 'bisque'
			},
		}
	})
	const vm = app.mount('#app')
</script>